<template>
  <div v-if="openState">
    <template v-for="card in cardList">
      <el-card class="form-card txnInfo-card" v-if="!card.hide">
        <div slot="header" class="label-header-msg">
          <span>{{ card.name }}</span>
        </div>
        <template v-if="card.formItemList.filter((x) => x.type === 'slot').length > 0">
          <template v-for="component in card.formItemList.filter((x) => x.type === 'slot')">
            <slot :name="component.prop"></slot>
          </template>
        </template>
        <ht-form
          :labelWidth="card.labelWidth"
          :rowNum="card.rowColNum"
          :open="openState"
          :ref="card.ref"
          :dictMap="dictMap"
          :rowData="formData"
          :formDiarules="card.rules"
          :formListOptions="card.formItemList"
        >
          <template v-if="card.formItemList.filter((x) => x.type === 'slot').length > 0">
            <template v-for="component in card.formItemList.filter((x) => x.type === 'slot')">
              <template :slot="component.prop" v-if="component.componentType === 'HtAmountUpper'">
                <ht-amount-upper :ref="component.ref" :inputValue="formData.amount"></ht-amount-upper>
              </template>
              <template :slot="component.prop" v-if="component.componentType === 'selectAccount'">
                <el-row>
                  <el-col :span="16">
                    <el-input
                      v-model="formData[component.prop]"
                      :placeholder="component.defaultAttr.placeholder"
                      :disabled="allDisabled || component.defaultAttr.disabled"
                      @keyup.enter.native="actNoInfo(card.ref, component.prop, component.actNoInfoCallback)"
                    />
                  </el-col>
                  <el-col :span="4" v-if="!allDisabled">
                    <div style="margin-left: 10px">
                      <el-button
                        type="primary"
                        icon="el-icon-search"
                        plain
                        @click="openPayDialog(component.prop, card.ref)"
                      >
                        账号查找
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </template>

              <template :slot="component.prop" v-if="component.componentType === 'selectBranch'">
                <el-row>
                  <el-col :span="16">
                    <el-input
                      v-model="formData[component.prop]"
                      :placeholder="component.defaultAttr.placeholder"
                      :disabled="allDisabled || component.defaultAttr.disabled"
                      @keyup.enter.native="getBankInf(card.ref, component.prop, component.bankInfCallback)"
                    />
                  </el-col>
                  <el-col :span="4" v-if="!allDisabled">
                    <div style="margin-left: 10px">
                      <el-button
                        type="primary"
                        icon="el-icon-search"
                        :disabled="allDisabled || component.defaultAttr.disabled"
                        plain
                        @click="openBankBranchDialog(component.prop, card.ref)"
                      >
                        账号查找
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </template>
            </template>
          </template>
        </ht-form>
      </el-card>
    </template>
    <payer-dialog ref="payerDialog" @confirm="confirmPay"></payer-dialog>
    <payee-dialog ref="payeeDialog" @confirm="confirmPay"></payee-dialog>
    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
  </div>
</template>

<script>
import HtAmountUpper from "@/views/components/HtAmountUpper";
import PayeeDialog from "@/views/components/PayeeDialog";
import PayerDialog from "@/views/components/PayerDialog";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getCustByActno, getOtherCustByActno } from "@/api/cnaps/common/custInfo";
export default {
  name: "CardForm",
  components: {
    HtAmountUpper,
    PayerDialog,
    PayeeDialog,
    BankBranchDialog,
  },
  data() {
    return {
      form: {},
    };
  },
  props: {
    allDisabled: {
      type: Boolean,
      default: false,
    },
    openState: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    formData: {
      type: Object,
      default: () => {},
    },
    dictMap: {
      type: Object,
      default: () => {},
    },
    cardList: {
      type: Array,
      default: [],
    },
    confirmPayerCallback: {
      type: Function,
      default: () => {},
    },
    confirmPayeeCallback: {
      type: Function,
      default: () => {},
    },
    confirmBankBranchCallback: {
      type: Function,
      default: () => {},
    },
  },
  watch: {
    openState: {
      handler(data) {
        this.initData();
      },
    },
  },
  mounted() {
    console.log("card form mounted");
    // 初始化设置
    // this.$set(this.formData, "payeeBrno", "904290099992");
    // this.$set(this.formData, "payeeBrName", "城银清算服务有限责任公司");
    // this.$set(this.formData, "payeeAccBrno", "904290099992");
    // this.$set(this.formData, "payeeAccBrName", "城银清算服务有限责任公司");

    this.initData();
  },
  methods: {
    initData() {
      this.$nextTick(() => {
        this.form = _.cloneDeep(this.formData);
      });
      if (this.allDisabled) {
        for (let card of this.cardList) {
          for (let item of card.formItemList) {
            if (item.defaultAttr.hasOwnProperty("disabled")) {
              item.defaultAttr.disabled = item.defaultAttr.disabled;
            } else {
              item.defaultAttr.disabled = true;
            }
          }
        }
      }
    },
    actNoInfo(refName, actNoType, actNoInfoCallback) {
      actNoInfoCallback(this.$refs[refName][0], actNoType);
    },
    getBankInf(refName, actNoType, bankInfCallback) {
      bankInfCallback(this.$refs[refName][0], actNoType);
    },
    openPayDialog(fromFlag = "", refName = "") {
      if (fromFlag.startsWith("payer")) {
        this.$refs.payerDialog.show(fromFlag, refName);
      } else {
        this.$refs.payeeDialog.show(fromFlag, refName);
      }
    },
    confirmPay(fromFlag, row, refName) {
      if (fromFlag.startsWith("payer")) {
        this.confirmPayerCallback(fromFlag, row, this.$refs[refName][0]);
      } else {
        this.confirmPayeeCallback(fromFlag, row, this.$refs[refName][0]);
      }
    },
    openBankBranchDialog(fromFlag = "", refName = "") {
      this.$refs.bankBranchDialog.show(fromFlag, refName);
    },
    confirmBankBranch(fromFlag, row, refName) {
      this.confirmBankBranchCallback(fromFlag, row, this.$refs[refName][0]);
    },
    close() {
      this.open = false;
    },
    getFormData(refName = "") {
      let resultObj = {};
      if (refName) {
        let tempData = this.$refs[refName].sonData();
        Object.assign(resultObj, ...tempData);
      } else {
        for (let item of this.cardList) {
          if (item.hide) continue;
          let tempData = this.$refs[item.ref][0].sonData();
          resultObj = Object.assign(resultObj, tempData);
        }
      }
      return resultObj;
    },
    getFormDataList(refName = "") {
      let resultList = [];
      if (refName) {
        resultList.push(this.$refs[refName].sonData());
      } else {
        for (let item of this.cardList) {
          if (item.hide) continue;
          let temp = this.$refs[item.ref][0].sonData();
          resultList.push(temp);
        }
      }
      return resultList;
    },
  },
};
</script>

<style scoped></style>
